<template lang="html">
    <div id="welcome-page" class="welcome">
        <div class="timers">
            跳过{{timer}}
        </div>
        <img src="../../assets/img/welcome.png">
    </div>
</template>

<script>
    export default {
        data() {
            return {
                timer:5, //默认倒数30秒
                stop: false, //默认是停止的，但界面加载之后会变成false
                Interval: null //setInterval的对象
            }
        },
        methods: {
            update() {
                if (this.timer <= 0) {
                    this.timer = 10;
                } else {
                    this.timer--;
                    if (this.timer == 0) {
                        this.$router.push({
                            path: '/login'
                        })
                    }
                }
            },
            startTimer() {
                //如果是false就开始倒计时，如果是true就停止倒计时
                if (this.stop == false) {
                  this.Interval = setInterval(this.update, 3000);
                } else {
                  clearInterval(this.Interval);
                }
    
                this.stop = !this.stop;
            }
        },
        mounted() {
            this.startTimer();
        }
    
    }
</script>

<style lang="scss" scoped>
    .welcome {
        img {
            position: fixed;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    
    .timers {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: rgba(14, 14, 14, 0.5);
        padding: 5px 10px;
        border-radius: 20px;
        color: #fff;
        border: 1px solid #fff;
        z-index: 999;
    }
</style>
